<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAeAEGK0sG98X2-qp5i1ao3hTwM0brOpm-All5BF6PoaKBxRWWERQh_9CCx4yOeR8PfepCWNA80vfLWw" type="text/javascript"></script>
    <script type="text/javascript">
        var map;
        var marker;
        var polyline;
        var lineCounter = 1;

        function initialize() {
            if (GBrowserIsCompatible()) {
                map = new GMap2(document.getElementById("map_canvas"));
                map.setCenter(new GLatLng(49.2861, -123.1170), 15);
                marker = new GMarker(map.getCenter());

                polyline = new GPolyline([new GLatLng(49.2861, -123.1170)],"#ff0000", 15);
                
                map.addOverlay(marker);
                map.addOverlay(polyline);
                map.setUIToDefault();
            }
        }
        function travel(distance,direction,cost){
            //update user's money left

            //recenter map to destination
            var curLat = marker.getLatLng().lat();
            var curLng = marker.getLatLng().lng();

            var latconst = 111.132; //source: http://en.wikipedia.org/wiki/Latitude
            var lngconst = 78.847;
            var cal_lat;
            var cal_lng;
            switch(direction){
                case 'e':
                    cal_lng = curLng + distance/lngconst;
                    cal_lat = curLat;
                    break;
                case 'n':
                    cal_lat = curLat + distance/latconst;
                    cal_lng = curLng;
                    break;
                case 'w':
                    cal_lng = curLng - distance/lngconst;
                    cal_lat = curLat;
                    break;
                case 's':
                    cal_lat = curLat - distance/latconst;
                    cal_lng = curLng;
                    break;
                default:
                    alert("Only ESWN is allowed");
            }
            var latlng = new GLatLng(cal_lat,cal_lng);
            map.removeOverlay(marker); //remove prev marker
            //map.removeOverlay(lineOverlay);
            //draw line to show history
            polyline.insertVertex(lineCounter++, latlng);
            map.addOverlay(polyline);

            marker = new GMarker(latlng);
            map.addOverlay(marker);
            map.panTo(latlng);
        }
    </script>
    <body onload="initialize()">
        <h1>JSP Page</h1>
        <div id ="map_canvas" style="height:400px; width:100%">
        </div>
        <div id="buttons" align="center">
            <button onclick="travel(4,'n',5);">Bus 4km North $5</button><br/>
            <button onclick="travel(6,'e',20);">Taxi 6km East $20</button><br/>
            <button onclick="travel(3.5,'s',5);">Bus 3.5km South $5</button><br/>
            <button onclick="travel(2,'w',20);">Taxi 2km West $20</button>
        </div>

    </body>
</html>